<template>
    <view class="flex flex-direction" style="height: 100vh; width: 100vw">
        <cu-custom bgColor="bg-gradual-green" :isBack="true">
            <block slot="content" style="font-weight: 700">章节详情</block>
            <block slot="backText">返回</block>
        </cu-custom>
        <view class="bg-white padding-bottom-sm">
            <view class="cu-card shadow">
                <view class="shadow cu-item solid-bottom text-center">
                    <view class="text-lg" style="font-weight: 700">{{ title() }}</view>
                    <view class="flex justify-between margin-tb-sm">
                        <view>
                            <view class="cu-tag bg-green round sm">日期</view>
                            <text class="margin-left-xs text-sm">{{ courseDate() }}</text>
                        </view>
                        <view>
                            <view class="cu-tag bg-green round sm">开始时间</view>
                            <text class="margin-left-xs text-sm">{{ startTime() }} </text>
                        </view>
                        <view>
                            <view class="cu-tag bg-green round sm">结束时间</view>
                            <text class="margin-left-xs text-sm">{{ endTime() }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="grid col-3 margin-lr-sm bg-white">
                <view class="flex flex-direction align-center solid-right">
                    <button class="cu-btn icon-button" @click="OnClick(1)">
                        <text class="cuIcon-record text-green"></text>
                    </button>
                    <view class="text-sm">编程代码</view>
                </view>
                <view class="flex flex-direction align-center solid-right">
                    <button class="cu-btn icon-button" @click="OnClick(2)">
                        <text class="cuIcon-rank text-red"></text>
                    </button>
                    <view class="text-sm">章节成绩</view>
                </view>
                <view class="flex flex-direction align-center">
                    <button class="cu-btn icon-button">
                        <text class="text-blue" :class="[
                attendance == '已到课'
                  ? 'cuIcon-roundcheck'
                  : 'cuIcon-roundclose',
              ]"></text>
                    </button>
                    <view class="text-sm">{{ attendance }}</view>
                </view>
            </view>
        </view>
        <view class="comment-container bg-white margin-top">
            <view class="cu-bar">
                <view class="action">
                    <text class="cuIcon-titles text-green"></text> 教师评价
                </view>
            </view>
            <view class="teacher-comment padding-lr padding-bottom text-content">{{
        teacher_comment
      }}</view>
        </view>

        <view class="feedback-container bg-white margin-top flex-twice">
            <view class="cu-bar">
                <view class="action">
                    <text class="cuIcon-titles text-green"></text> 学生反馈
                </view>
            </view>
            <feed-back :feedback="report.report_feedback" :feedback_valid="feedback_valid" @feedback="addFeedback"></feed-back>
        </view>
    </view>
</template>

<script>
import FeedBack from './feedback/feedback.vue';
import {
    COURSE_ARRA_API
} from '@/API.js';
import {
    getAttendance,
    getFeedbackValid,
    getTeacherComment
} from './chapter.js';

export default {
    components: {
        FeedBack,
    },
    data() {
        return {
            course_id: '',
            course_chapter_id: '',
            attendance: '',
            teacher_comment: '',
            feedback_valid: 0,
            report: null,
        };
        //feedback_valid:{'0':可以发送反馈 ,'1':由于已经提交反馈而不能反馈 ,'2':由于课程尚未结束而不能提交反馈}
    },
    onLoad: function(options) {
        this.course_chapter_id = options.course_chapter_id;
        this.course_id = options.course_id;
        uni.request({
            url: COURSE_ARRA_API.courseGet.url,
            method: COURSE_ARRA_API.courseGet.method,
            header: {
                'http-token': getApp().globalData.user.token,
            },
            data: {
                course_id: this.course_id,
                course_chapter_id: this.course_chapter_id,
            },
            success: (res) => {
                this.report = res.data;
            },
            fail: () => {

            },
            complete: () => {
                this.feedback_valid = getFeedbackValid(this.report.course_arrangement, this.report.report_feedback);
                this.teacher_comment = getTeacherComment(this.report.teacher_comment);
            },
        });
    },
    watch: {
        report: {
            handler(val) {
                this.attendance = getAttendance(val, new Date(), new Date(val.course_arrangement.course_date + ' ' + val.course_arrangement
                    .start_time));
            },
            deep: true,
        },
    },
    methods: {
        addFeedback: function(score, content) {
            uni.request({
                url: COURSE_ARRA_API.courseGet.url,
                method: COURSE_ARRA_API.coursePost.method,
                header: {
                    'http-token': getApp().globalData.user.token,
                },
                data: {
                    score: score,
                    course_chapter_id: this.course_chapter_id,
                    content: content,
                },
                success: (res) => {
                    this.report = res.data;
                },
                fail: () => {
                    uni.showToast({
                        title: '反馈提交失败',
                        duration: 2000,
                    });
                },
                complete: () => {
                    this.feedback_valid = getFeedbackValid(this.report.course_arrangement, this.report.report_feedback);
                },
            });
        },
        OnClick: function(to) {
            if (to == 1) {
                uni.navigateTo({
                    url: '/pages/chapter/program/programList?course_id=' +
                            this.course_id +
                            '&course_chapter_id=' +
                            this.course_chapter_id,
                });
            } else if (to == 2) {
                uni.navigateTo({
                    url: '/pages/chapter/grade/grade?course_id=' +
                            this.course_id +
                            '&course_chapter_id=' +
                            this.course_chapter_id,
                });
            }
        },
        startTime: function() {
            if (this.report) {
                let startTimeList = this.report.course_arrangement.start_time.split(
                    ':'
                );
                return `${startTimeList[0]}:${startTimeList[1]}`;
            } else {
                return '00:00';
            }
        },
        endTime: function() {
            if (this.report) {
                let endTimeList = this.report.course_arrangement.end_time.split(':');
                return `${endTimeList[0]}:${endTimeList[1]}`;
            } else {
                return '08:00';
            }
        },
        courseDate: function() {
            if (this.report) {
                return this.report.course_arrangement.course_date;
            } else {
                return '1970-01-01';
            }
        },
        title: function() {
            if (this.report) {
                return this.report.course_arrangement.chapter_title;
            } else {
                return '课程章节详情';
            }
        },
    },
};
</script>

<style scoped>
    .icon-button {
        font-size: 60upx;
        background-color: #fff;
    }
</style>
